<template>
<div class="input-group search-field-wrapper et-search">
  <input class="input-group-field" type="text" :placeholder="$t(placeholder)" v-model="searchTxt" @keyup.enter="searchHandler" />
  <div class="input-group-button">
    <button class="button" @click="searchHandler">
      <et-icon :name="searchIcon" />
    </button>
  </div>
  <a v-if="searchTxt && searchTxt.trim().length !== 0" @click="clearTxt">
    <et-icon :name="clearIcon" :custom-classes="['async-clear-icon']" />
  </a>
</div>
</template>

<script>
import { EtIcon } from '../../widgets';

export default {

  components: {
    EtIcon
  },

  props: {
    searchIcon: {
      type: String,
      default: 'search'
    },
    clearIcon: {
      type: String,
      default: 'delete'
    },
    handler: {
      type: Function,
      default: () => {}
    },
    placeholder: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      searchTxt: null
    };
  },

  methods: {

    searchHandler() {
      this.handler(this.searchTxt);
    },

    clearTxt() {
      this.searchTxt = null;
    }

  }

};
</script>
